<template>
	<view class="rank-tab">
		<view class="rank-tab-item" 
		:key="index"
		v-for="(item,index) in tabLists" 
		:class="[currentIndex == index ? 'active': '']"
		@click="tabClick(index)"
		>{{item}}</view>
	</view>
</template>

<script>
	export default {
		props:{
			currentIndex:{
				type:Number,
				default:0
			},
			tabLists:{
				type:Array,
				default(){
					return []
				}
			}
		},
		methods:{
			tabClick(index){
				if(index == this.currentIndex){ return }
				this.$emit('tabChange',index)
			}
		}
	}
</script>

<style lang="less" scoped>
	.rank-tab {
		width: 690upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		font-size: 30upx;
		
	}
	.rank-tab-item {
		background-color: #5f96fd;
		border-top-left-radius: 14upx;
		border-top-right-radius: 14upx;
		flex: 1;
		text-align: center;
		height: 93upx;
		line-height: 83upx;
		color: #fff;
		
		&.active {
			background-color: #387cfd;
			color: #ffde56;
			position: relative;
			&::before {
				content: "";
				position: absolute;
				border-top: 5upx solid #ffde56;
				border-left: 5upx solid #ffde56;
				border-right: 5upx solid transparent;
				border-bottom: 5upx solid transparent;
				transform: rotate(-135deg);
				top: 60upx;
				left: 50%;
				margin-left: -5upx;
			}
		}
	}
</style>
